<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>p2p网贷平台</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="css/common.css" rel="stylesheet" />
<link href="css/register.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="script/jquery.min.js"></script>
<script type="text/javascript" src="script/common.js"></script>
  <script src="script/vue.js"></script>
  <script src="script/axios.min.js"></script>
  <script src="script/moment.js"></script>
</head>
<body>
<header>
  <!--#include virtual="wbtop.html"-->
</header>
<!--注册-->
<div class="wrap">
  <div class="tdbModule register">
    <div class="registerTitle">注册账户</div>
    <div class="registerLc1">
      <p class="p1">填写账户信息</p>
      <p class="p2">验证手机信息</p>
      <p class="p3">注册成功</p>
    </div>
    <div class="registerCont" id="app">
      <ul>
        <li><span class="dis">用户名:</span>
          <input  v-model="user.loginName" type="text" class="input _userName" maxlength="24" tabindex="1" @blur="check(user.loginName)">
          <span v-if="nameshow" data-info="6-24个字符，字母开头，字母、数字下划线组成">用户名不能为空</span></li>
        <li><span class="dis">密码:</span>
          <input  v-model="user.loginPwd" type="password"  class="input _password" maxlength="24" tabindex="1" @blur="checkpwd(user.loginPwd)">
          <span v-if="pwdshow" data-info="6-24个字符，英文、数字组成，区分大小写">密码不能为空</span></li>
        <li><span class="dis">确认密码:</span>
          <input v-model="pwd" type="password" class="input _repeatPassword" maxlength="24" tabindex="1" @blur="checkp(pwd)">
          <span v-if="pshow" data-info="请再次输入密码">不能为空</span><span v-if="qshow" data-info="请再次输入密码">密码不一致</span></li>
        <li><span class="dis">用户类型:</span>
          <input type="radio" v-model="user.type" value="0">借款者
          <input type="radio" v-model="user.type" value="1">投资者</li>
        <li v-if="user.type==0"><span class="dis">借款人类型:</span>
          <input type="radio" v-model="user.comtype" value="0">个人用户
          <input type="radio" v-model="user.comtype" value="1">企业用户</li>
        <li><span class="dis">{{user.comtype==1?'企业名称':'姓名'}}:</span>
          <input  v-model="user.fullName" type="text"  class="input _userName" maxlength="24" tabindex="1" @blur="checkfull(user.fullName)">
          <span v-if="fullnameshow" data-info="请再次输入密码">名称不能为空</span></li>
        <li class="telNumber"> <span class="dis">手机号码:</span>
          <input v-model="user.tel" type="text" class="input _phoneNum" id="phone" name="phone" tabindex="1" maxlength="11">
          <a class="button radius1 _getkey" @click="send" type="success" :disabled="!show">获取验证码<span v-show="!show" class="count">({{count}}s)</span></a><span id="phoneJy" data-info="请输入您的常用电话">请输入您的常用电话</span></li>
        <li class="telNumber"><span class="dis">短信验证码:</span>
          <input v-model="user.code" id="phonVerify" type="text" class="input input1  _phonVerify" data-_id="phonVerify" tabindex="1">
          <span class="info" id="phonVerifys" data-info="请输入手机验证码">请输入手机验证码</span></li>
        <li v-if="user.type==1"> <span class="dis">推 荐 人:</span>
          <input type="text" class="input input1 _invist">
          <span class="_invist_msg">请填写推荐人账户名，如无推荐人请留空</span> </li>
        <li class="agree">
          <input name="protocol" id="protocol" type="checkbox" value="" checked="checked">
          我同意《<a href="#" target="_black">亿人宝注册协议</a>》 <span id="protocolAlt" data-info="请查看协议">请查看协议</span></li>
        <li class="btn"><a href="javascript:void(0);" class="radius1 _ajaxSubmit" @click="zhuce">下一步</a></li>
      </ul>
    </div>
  </div>
</div>
<!--网站底部-->
<div id="footer" class="ft">
  <div class="ft-inner clearfix">
    <div class="ft-helper clearfix">
      <dl>
        <dt>关于我们</dt>
        <dd><a href="公司简介.html">公司简介</a><a href="管理团队.html">管理团队</a><a href="网站公告.html">网站公告</a></dd>
      </dl>
      <dl>
        <dt>相关业务</dt>
        <dd><a href="list.html">我要投资</a><a href="我要借款.html">我要借款</a></dd>
      </dl>
      <dl>
        <dt>帮助中心</dt>
        <dd><a href="帮助中心.html">新手入门</a><a href="个人中心首页.html">我的账户</a><a href="list.html">债权转让</a></dd>
      </dl>
      <dl>
        <dt>联系我们</dt>
        <dd><a href="联系我们.html">联系我们</a></dd>
      </dl>
    </div>
    <div class="ft-service">
      <dl>
        <dd>
          <p><strong>400-660-1268</strong><br>
            工作日 9:00-22:00<br>
            官方交流群:<em>12345678</em><br>
            工作日 9:00-22:00 / 周六 9:00-18:00<br>
          </p>
          <div class="ft-serv-handle clearfix"><a class="icon-hdSprite icon-ft-sina a-move a-moveHover" title="亿人宝新浪微博" target="_blank" href="#"></a><a class="icon-hdSprite icon-ft-qqweibo a-move a-moveHover" title="亿人宝腾讯微博" target="_blank" href="#"></a><a class="icon-ft-qun a-move a-moveHover" title="亿人宝QQ群" target="_blank" href="#"></a><a class="icon-hdSprite icon-ft-email a-move a-moveHover mrn" title="阳光易贷email" target="_blank" href="mailto:xz@yirenbao.com"></a></div>
        </dd>
      </dl>
    </div>
    <div class="ft-wap clearfix">
      <dl>
        <dt>官方二维码</dt>
        <dd><span class="icon-ft-erweima"><img src="images/code.png" style="display: inline;"></span></dd>
      </dl>
    </div>
  </div>
  <div class="ft-record">
    <div class="ft-approve clearfix"><a class="icon-approve approve-0 fadeIn-2s" target="_blank" href="#"></a><a class="icon-approve approve-1 fadeIn-2s" target="_blank" href="#"></a><a class="icon-approve approve-2 fadeIn-2s" target="_blank" href="#"></a><a class="icon-approve approve-3 fadeIn-2s" target="_blank" href="#"></a></div>
    <div class="ft-identity">©2015 亿人宝 All rights reserved&nbsp;&nbsp;&nbsp;<span class="color-e6">|</span>&nbsp;&nbsp;&nbsp;安徽省亿人宝投资管理有限公司&nbsp;&nbsp;&nbsp;<span class="color-e6">|</span>&nbsp;&nbsp;&nbsp;<a target="_blank" href="http://www.miitbeian.gov.cn/">皖ICP备12345678号-1</a></div>
  </div>
</div>
</body>
<script>
  new Vue({
    el:"#app",
    data:{
      user:{loginName:'',loginPwd:'',fullName:''},
      pwd:'',
      nameshow:false,
      pwdshow:false,
      pshow:false,
      fullnameshow:false,
      qshow:false,
      show: true, // 初始启用按钮
      count: '', // 初始化次数
      timer: null,
    },
    methods:{
      checkfull:function(data){
        if(data.length==0){
          this.fullnameshow=true;
        }else{
          this.fullnameshow=false;
        }
      },
      check:function(data){
        if(data.length==0){
          this.nameshow=true;
        }else{
          this.nameshow=false;
        }
      },
      checkpwd:function(data){
        if(data.length==0){
          this.pwdshow=true;
        }else{
          this.pwdshow=false;
        }
      },
      checkp:function(data){
        if(data.length==0){
          this.pshow=true;
        }else{
          this.pshow=false;
          if(data!=this.user.loginPwd){
            this.qshow=true;
          }else{
            this.qshow=false;
          }
        }
      },
      zhuce:function(){
        axios.post("/api/finance-service-user/investor/zhuce",this.user).then(
                (res)=>{
                  if(res.data.success){
                    window.location.href="register1.html";
                  }else{
                    alert(res.data.message);
                  }
                }
        );
      },
      send() {
        if (!this.timer) {
          this.count = 60;
          this.show = false;
          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= 60) {
                this.count--;
            }else{
              this.show = true;
              clearInterval(this.timer); // 清除定时器
              this.timer = null;
            }
            }, 1000)
          }
          axios.get("/api/finance-service-user/investor/sendcode/"+this.user.tel).then(
                  (res)=>{
                    if(res.data.success){
                      alert(res.data.message);
                    }else{
                      alert(res.data.message);
                    }
                  }
          );
      },
    }
  });
</script>
</html>
